<template>
  <div style="height:100%">
    <div class="RightCardTitle">机构详情 </div>
    <div v-if="listShow.length > 0 && xianData.Data || xiangData.Data " class="organizationContent">
      <div class="topContent">
        <!-- <div class="topFlex">
          <span :class="{ flexOne : flexOneClick == 1}" @click="topFlexClick(1)"> 县级 </span>
          <span :class="{ flexOne : flexOneClick == 2}" @click="topFlexClick(2)"> 乡镇级 </span>
        </div> -->
        <div class="programmeDetail">
          <span :class="{ active : flexOneClick == 1}" @click="topFlexClick(1)"> 县级 </span>
          <span :class="{ active : flexOneClick == 2}" @click="topFlexClick(2)"> 乡镇级 </span>
        </div>
        <div>
          <template>
            <template v-if="flexOneClick == 1 && xianData.Data">
              <div v-for="(itemData,index) in xianData.Data[0].Data " :key="index">
                <div class="centerStyle">
                  <div class="centerFont">
                    {{ itemData.OrgName }}
                  </div>
                </div>
                <div class="centerLine" />
              </div>
              <div class="bottomLine" />
            </template>
            <div v-if="flexOneClick == 1 && !xianData.Data" class="noData" style="margin-top: -40%;"> 暂无数据 </div>
          </template>
          <template>
            <template v-if="flexOneClick == 2 && xiangData.Data">
              <div v-for="(itemData,index) in xiangData.Data[0].Data " :key="index">
                <div class="centerStyle">
                  <div class="centerFont">
                    {{ itemData.OrgName }}
                  </div>
                </div>
                <div class="centerLine" />
              </div>
              <div class="bottomLine" />
            </template>
            <div v-if="flexOneClick == 2 && !xiangData.Data" class="noData" style="margin-top: -40%;"> 暂无数据 </div>
          </template>
          <div v-show="(!xiangData.Data||!xianData.Data)" class="verticalFlex">
            <div class="verticalLine" />
            <div class="verticalLineRight" />
          </div>
          <div class="bottomConetnt" v-if="(xianData.Data && xianData.Data[1])||(xiangData.Data && xiangData.Data[1])">
            <template v-if="flexOneClick == 1 && xianData.Data ">
              <div v-for="(itemData,index) in xianData.Data[1].Data" :key="index" class="bottomStyle">
                <div class="bottomFontWidth">{{ itemData.OrgName }}</div>
              </div>
            </template>
            <template v-if="flexOneClick == 2 && xiangData.Data ">
              <div v-for="(itemData,index) in xiangData.Data[1].Data" :key="index" class="bottomStyle">
                <div class="bottomFontWidth">{{ itemData.OrgName }}</div>
              </div>
            </template>
          </div>
        </div>

      </div>
    </div>
    <div v-loading="loadingOrgan" class="listTables" element-loading-background="rgba(0, 0, 0, 0.4)" :class="[xianData.Data||xiangData.Data ? 'organTableListBox' : 'organTableListBoxAct']">
      <!-- <el-table
        :data="listTableOrgan"
        class="tableFXPg"
        style="height:100%"
      >
        <el-table-column align="center" prop="userName" label="姓名" />
        <el-table-column align="center" :class-name="'tapadlr0'" prop="inJob" label="指挥部内部职务" />
        <el-table-column align="center" prop="job" label="工作单位职务" width="120" />
        <el-table-column align="center" prop="phone" label="手机" />
      </el-table> -->
      <div class="tabel_common tabel_commons">
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th"> 姓名 </div>
              <div class="th"> 指挥部内部<br>职务 </div>
              <div class="th"> 工作单位职务 </div>
              <div class="th"> 手机 </div>
            </div>
          </div>
          <el-scrollbar style=" width: 100%;" class="el_scrollbar" 
          :class="{'el_scrollbar2':listShow.length > 0 && xianData.Data || xiangData.Data ,}">
            <div class="tbody">
              <template>
                <div v-if="listTableOrgan!=null && listTableOrgan.length <= 1" class="noData" :style="(listShow.length > 0 && xianData.Data || xiangData.Data)? 'margin-top: -32%;':'margin-top: 2%;'" > 暂无数据 </div>
              </template>
              <div class="tr" v-for="(dict, index) in listTableOrgan" :key="index">
                  <!-- @click="clickRHCDRow(dict, index)" :class="['tr', PionId == index ? 'ta' : '']"> -->
                  <div class="td"> {{ dict.userName }} </div>
                  <div class="td"> {{ dict.inJob }} </div>
                  <div class="td"> {{ dict.job }} </div>
                  <div class="td"> {{ dict.phone }} </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GetPlanOrganizationUseList, GetPlanOrganizationList } from '../../../api/xuna.js'
export default {
    data() {
        return {
            listTableOrgan: [],
            organFdplanId: '',
            loadingOrgan: false,
            xianData: [],
            xiangData: [],
            TotelData: [],
            flexOneClick: 1,
            listShow: [],
            addvcd:'',
        }
    },
    beforeDestroy() {
        this.$eventBus.$off('organFd')
    },
    created() {
        this.$eventBus.$on('organFd', res => {
            this.organFdplanId = res.id;
            this.addvcd = res.addvcd;
            if (res.num == 1) {
                this.listTableOrgan = [];
                this.getGetPlanOrganizationUseList()
                this.getGetPlanOrganizationList()
            }
        })
    },
    methods: {
        topFlexClick(i) {
            this.flexOneClick = i
        },
        getGetPlanOrganizationList() {
          let pams = {
              //'addvcd': this.addvcd,
              planId:this.addvcd,// this.organFdplanId
              'orgType':1,
          }
            GetPlanOrganizationList(pams).then((res) => {
                this.listShow = res.data
                this.xianData = res.data[0]
                this.xiangData = res.data[1]

               console.log(this.xianData, '122222222')
               console.log(this.xiangData, '2222222222')
            })
        },
        // 列表
        getGetPlanOrganizationUseList() {
            this.loadingOrgan = true;
            let pams = {
              //'addvcd': this.addvcd,
              'planId':this.addvcd,// this.organFdplanId
            }
            GetPlanOrganizationUseList(pams).then((res) => {
                this.loadingOrgan = false
                this.listTableOrgan = res.data
            }).catch(err=>{
              this.loadingOrgan = false;
            })
        }
    }
}
</script>
<style lang="less" scoped>
.organizationContent{
  overflow: auto;
  //max-height: 300px;
  height: 32vh;

}
  .organTableListBox{
    height: calc(100% - 350px);
    overflow: hidden;
    margin-top: 10px;
    .tableFXPg{
      height: calc(100% - 40px);
    }
   
  }
  
  .organTableListBoxAct{
    height: calc(100% - 50px);
    /deep/.el-table__empty-text{
      font-size: 16px;
      font-weight: bold;
      color: #fff;
    }
  }
   .el-table /deep/ .el-table__body-wrapper{
       height: calc(100% - 70px)!important;
     }
</style>
<style lang="less" scoped>
.tapadlr0 {
   .cell{
        padding:0px!important;
      }
} 
.el_scrollbar{
  height:70vh;
}
.el_scrollbar2{
  height:36vh;
}

.programmeDetail {
  margin: 0;
  text-align: center;
  margin-bottom: 10px;

  &>:last-child {
    margin-left: -5px;
  }

  span {
    width: 122px;
    height: 28px;
    display: inline-block;
    background: url(../../../assets/newimg/button.png) no-repeat center;
    background-size: 100% 100%;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
  }

  .active {
    background: url(../../../assets/newimg/buttonActive.png) no-repeat center !important;
    background-size: 100% 100% !important;

  }
}
</style>


